<template>
  <div>
    <!--<el-button type="primary" size="mini" class="addBtn" @click="openAddDrawer()">添加</el-button>-->
    <el-button type="danger" size="mini" :loading="syncLoading" @click="sync('2')">同步</el-button>

    <el-row :gutter="20">
      <el-col :span="16">
        <el-divider content-position="left">标签列表</el-divider>
        <el-table
          v-loading="loading"
          :data="tagList"
          border
          style="width: 100%"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
        >
          <el-table-column type="expand"  fixed="left">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.blogList.length === 0">暂无博客</el-tag>
              <el-tag v-for="(item,index) in scope.row.blogList" @click="handleBlogInfo(item)" :key="index" :color="item.tagColor" style="margin-right: 10px;">{{item.blogTitle}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="tagId" label="标签id" />
          <el-table-column prop="tagName" label="标签名" />
          <el-table-column prop="tagColor" label="标签颜色">
            <template slot-scope="scope">
              <div :style="{width: '20px',height: '20px',backgroundColor:scope.row.tagColor}"></div>
            </template>
          </el-table-column>
          <el-table-column prop="tagBlogCount" label="博客数量" />
          <el-table-column label="是否启用">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.enable===1" tag="success">启用</el-tag>
              <el-tag v-else tag="danger">未启用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-dropdown trigger="hover">
                <el-button size="mini" type="primary">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button size="mini" type="primary" @click="handlerEdit(scope.row.tagId)">编辑</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="isAdmin">
                    <el-button size="mini" type="danger" @click="handlerDelete(scope.row.tagId)">删除</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="isAdmin">
                    <el-button size="mini" type="success" @click="handlerEnable(scope.row.tagId)">启用</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="isAdmin">
                    <el-button size="mini" type="warning" @click="handlerDisable(scope.row.tagId)">弃用</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>

          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="8">
        <el-divider content-position="left">标签添加</el-divider>
        <el-form ref="ruleForm" :model="addTag" label-width="100px">
          <el-form-item label="标签名称" prop="tagName">
            <el-input v-model="addTag.tagName" />
          </el-form-item>
          <el-form-item v-if="isAdmin" label="博客关联" prop="tagColor">
            <el-select v-model="blogList" filterable multiple placeholder="请选择标签" style="width: 100%" @focus="getAllBlogsUndeletedAndEnabled()">
              <el-option
                v-for="item in blogInfos"
                :key="item.blogId"
                :label="item.blogTitle"
                :value="item.blogId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="标签颜色" prop="tagColor">
            <el-color-picker
              v-model="addTag.tagColor"
              :show-alpha="false"
              color-format="hex"
              :predefine="predefineColors"
            />
          </el-form-item>
          <el-form-item label="提交" label-width="100px">
            <el-button type="primary" :loading="saveLoading" @click="submitForm()">提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-dialog
      title="添加标签"
      :visible.sync="tagDrawer"
      width="30%"
    >
      <tag-add @getTagList="getTagList" @closeAddDrawer="closeAddDrawer" />
    </el-dialog>
    <el-dialog
      title="更新标签"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <tag-update :tag="tag" @getTagList="getTagList" @closeUpdateDialog="closeUpdateDialog" />
    </el-dialog>
  </div>
</template>

<script>
import tagAdd from '../tag/tag-add'
import tagUpdate from '../tag/tag-update'
import tagApi from '../../../api/tag'
import blogApi from '../../../api/blog'
import {contentSync} from "../../../utils";
export default {
  name: 'TagList',
  components: {
    tagAdd,
    tagUpdate
  },
  data() {
    return {
      // 数据列表
      tagList: [],
      tagDrawer: false,
      dialogVisible: false,
      tag: {},
      loading: true,
      isAdmin: false,
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ],
      addTag:{
        tagName: '',
        tagColor: '#00ced1'
      },
      saveLoading:false,
      syncLoading:false,
      blogInfos:[],
      blogList:[]
    }
  },
  created() {
    this.getTagList()
    const username = this.$store.getters.username
    if (username === 'admin') {
      this.isAdmin = true
    }
  },
  methods: {
    getAllBlogsUndeletedAndEnabled(){
      blogApi.getAllBlogsUndeletedAndEnabled().then(res=>{
        if(res.code === 200){
          this.blogInfos = res.data;
        }
      })
    },
    submitForm() {
      this.saveLoading = true
      let arr = []
      this.blogList.forEach(e=>{
        arr.push({
          blogId:e
        })
      })
      this.addTag.blogList = arr
      tagApi.save(this.addTag).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.blogList = []
          this.addTag = {
            tagName: '',
            tagColor: '#00ced1'
          }
          this.getTagList()
          this.saveLoading = false
        }else{
          this.saveLoading = false
        }
      }).catch(e=>{
        this.saveLoading = false
      })
    },
    sync(type) {
      this.$confirm('此操作为数据同步, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        tag: 'warning'
      }).then(() => {
        this.loading = true
        this.syncLoading = true
        // 内容同步
        contentSync(type).then(res=>{
          if(res.code === 200){
            this.$message.success(res.data);
            this.loading = false
            this.syncLoading = false
            this.getTagList()
          }else{
            this.$message.error('同步失败')
            this.loading = false
            this.syncLoading = false
          }
        }).catch(e=>{
          this.loading = false
          this.syncLoading = false
          this.$message.error('同步失败')
        })
      })

    },
    handleBlogInfo(item){
      this.$nextTick(()=>{
        this.$router.push(`/Article/blogUpdate/${item.blogId}`)
      })
    },
    getTagList() {
      tagApi.listBack().then(res => {
        this.tagList = res.data
        this.loading = false
      })
    },
    handlerEdit(id) {
      tagApi.get(id).then(res => {
        if (res.code === 200) {
          this.tag = res.data
        }
      })
      this.openUpdateDialog()
    },
    handlerDelete(id) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        tag: 'warning'
      }).then(() => {
        this.loading = true
        tagApi.deleteById(id).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getTagList()
          }else{
            this.loading = false
          }
        }).catch(e=>{
          this.loading = false
        })
      })
    },
    handlerEnable(id) {
      this.$confirm('此操作将启用该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        tag: 'warning'
      }).then(() => {
        tagApi.enableById(id).then(res => {
          this.$message.success(res.msg)
          this.getTagList()
          this.$store.commit('tagList/SET_TYPELIST', res.data)
        })
      })
    },
    handlerDisable(id) {
      this.$confirm('此操作将弃用该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        tag: 'warning'
      }).then(() => {
        tagApi.disableById(id).then(res => {
          this.$message.success(res.msg)
          this.getTagList()
          this.$store.commit('tagList/SET_TYPELIST', res.data)
        })
      })
    },
    openAddDrawer() {
      this.tagDrawer = true
    },
    closeAddDrawer() {
      this.tagDrawer = false
    },
    openUpdateDialog() {
      this.dialogVisible = true
    },
    closeUpdateDialog() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>

</style>
